<script setup>
import { reactive, getCurrentInstance, h } from "vue";
import { loginStore } from "@/store/login.js";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';


const store = loginStore();
const router = useRouter();

let loginForm = reactive({
  userName: "test",
  passWord: "secret",
});

const login = () => {
  if (!loginForm.userName || !loginForm.passWord) {
    // 显示错误提示
    message.error("请输入用户名和密码！");
  }
  store
    .login(loginForm)
    .then((res) => {
      router.push({ name: "Console" });
    })
    .catch((error) => {
      // 显示错误提示
      message.error(error.message);
    });
};

</script>

<template>
  <div class="login">
    <div class="login-wrap">
      <div class="title">电梯检测抽查管理系统</div>
      <!-- 表单开始 -->
      <a-form layout="vertical">
        <a-form-item label="用户名" name="userName">
          <a-input placeholder="用户名" v-model:value="loginForm.userName">
            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="密码" name="passWord">
          <a-input-password placeholder="密码" v-model:value="loginForm.passWord">
            <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            shape="round"
            block
            @click="login"
            class="btn"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  background-color: #f0f2f5;
  position: absolute;
  height: 100vh;
  width: 100%;

  .login-wrap {
    width: 550px;
    margin: 80px auto 0 auto;
    border-radius: 35px;
    padding: 50px 100px;

    .title {
      color: black;
      width: 100%;
      font-size: 25px;
      text-align: center;
      margin-bottom: 40px;
    }

    .btn{
      margin-top: 15px;
    }
  }
}
</style>
